<template>
    <div class="container">
        <div class="title">
            <div class="left">
                <div class="top">
                    <div :style="{ color: data.titlecolor }">{{ data.title1 || '限时砍价' }}</div>
                    <div class="timebox" v-if="data.isTime">
                        <div class="t_a">{{ d || 0 }}</div>
                        <div style="font-size: 20px;">:</div>
                        <div class="t_a">{{ h || 0 }}</div>
                        <div style="font-size: 20px;">:</div>
                        <div class="t_a">{{ m || 0 }}</div>
                        <div style="font-size: 20px;">:</div>
                        <div class="t_a">{{ s || 0 }}</div>
                    </div>
                </div>
                <div class="bottm">
                    <div class="txt" :style="{ color: data.contentcolor1 }">{{ data.content1 || '限时限量砍价' }}</div>
                </div>

            </div>
            <div class="right">
                <div class="top">
                    <!-- <div>{{ data.title2 || '限时砍价' }}</div> -->
                    <div class="canyu">更多</div>
                </div>
                <div class="bottm">
                    <!-- <div class="txt" :style="{ color: data.contentcolor2 }">{{ data.content2 || '限时限量砍价' }}</div> -->
                </div>
            </div>
        </div>
        <div class="center" :style="{ backgroundColor: data.cardBgColor }">
            <div class="left">
                <div class="list" v-for="(it, index) in list" :key="index">
                    <div class="item">
                        <img :src="it.img" alt="">
                        <div class="title" v-if="data.showTitle == 1 ? true : false">{{ it.productName }}</div>
                        <div class="txt">
                            <div class="inst" :style="{ color: data.color }">
                                <div class="moneyleft">￥</div>
                                <div class="moneyright">0.0 </div>
                            </div>
                            <div class="money" v-if="data.price">￥9.9</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "bargain",
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    watch: {

        data: {
            handler(newData, oldData) {
                // 检查 tabType 是否发生了变化
                console.log('Prop Value changed from1', oldData, 'to', newData.tabType);
                if (this.data.Time) {
                    this.countDown();
                }
            },
            // 开启深度监听
            deep: true
        },

    },

    data() {
        return {
            tit: '限时秒杀',
            list: [
                {
                    "productId": 3601,
                    "productName": "驼大大新疆正宗骆驼奶粉初乳骆驼乳粉蓝罐礼盒装120g*4罐",
                    "img": "https://img.quanminyanxuan.com/excel/f6860885547648d9996474bbf21fdca9.jpg",
                    "productPrice": 299,
                    "originalPrice": 598,
                    "volumeStr": "741",
                    "goodRatio": 98
                },
                {
                    "productId": 3268,
                    "productName": "百合28件套新骨质瓷餐具",
                    "img": "https://img.quanminyanxuan.com/excel/185e7365f65543f2b4ebc67036d6a78f.jpg",
                    "productPrice": 370,
                    "originalPrice": 1388,
                    "volumeStr": "400",
                    "goodRatio": 99
                },
                {
                    "productId": 3601,
                    "productName": "驼大大新疆正宗骆驼奶粉初乳骆驼乳粉蓝罐礼盒装120g*4罐",
                    "img": "https://img.quanminyanxuan.com/excel/f6860885547648d9996474bbf21fdca9.jpg",
                    "productPrice": 299,
                    "originalPrice": 598,
                    "volumeStr": "741",
                    "goodRatio": 98
                },
                {
                    "productId": 3268,
                    "productName": "百合28件套新骨质瓷餐具",
                    "img": "https://img.quanminyanxuan.com/excel/185e7365f65543f2b4ebc67036d6a78f.jpg",
                    "productPrice": 370,
                    "originalPrice": 1388,
                    "volumeStr": "400",
                    "goodRatio": 99
                },
            ],
            d: '',
            h: '',
            m: '',
            s: '',
            sum_h: ''


        }
    },

    mounted() {
    },
    methods: {

        countDown() {
            // 定义结束时间戳
            const end = Date.parse(this.data.Time)
            // 定义当前时间戳
            const now = Date.parse(new Date())
            // 做判断当倒计时结束时都为0
            if (now >= end) {
                this.d = 0
                this.h = 0
                this.m = 0
                this.s = 0
                return
            }
            // 用结束时间减去当前时间获得倒计时时间戳
            const msec = end - now
            let d = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
            let h = parseInt(msec / 1000 / 60 / 60 % 24)//算出小时数
            let m = parseInt(msec / 1000 / 60 % 60)//算出分钟数
            let s = parseInt(msec / 1000 % 60)//算出秒数
            //给数据赋值
            this.d = d
            this.h = h > 9 ? h : '0' + h
            this.m = m > 9 ? m : '0' + m
            this.s = s > 9 ? s : '0' + s
            //定义this指向
            const that = this
            // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
            setTimeout(function () {
                that.countDown()
            }, 1000)
        }
    }
};
</script>
<style scoped lang="scss">
.container {
    background: #fff;

    .title {
        display: flex;
        align-content: center;
        justify-content: space-between;
        width: 100%;

        .left,
        .right {
            // width: 50%;

            .top {
                display: flex;

                align-items: center;
                font-size: 16px;
                font-weight: bold;
                color: #122950;
            }

            .bottm {
                margin-top: 5px;

                .txt {
                    color: #fc2326;
                    font-size: 12px;
                }
            }



            .timebox {

                display: flex;
                align-items: center;
                justify-content: center;

                .t_a,
                .t_b,
                .t_c {
                    width: 23px;
                    height: 23px;
                    background-color: #fc2326;
                    border-radius: 5px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0px 2px;
                }
            }
        }

        .right {
            display: flex;
            align-items: flex-start;

            .top {
                display: flex;
                align-items: center;

                .canyu {
                    font-size: 12px;
                    color: #ccc;
                }
            }
        }
    }

    .center {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        padding: 10px;
        border-radius: 4px;

        .left,
        .right {
            width: 100%;
            display: flex;
            justify-content: space-around;

            .list {
                border-radius: 5px;

                .title {
                    width: 60px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 12px;
                }


                img {
                    width: 75px;
                    height: 75px;
                    border-radius: 5px;
                    overflow: hidden;
                }

                .txt {
                    margin-top: 5px;
                    display: flex;
                    align-items: center;

                    .inst {
                        color: red;
                        font-size: 10px;
                        font-weight: bold;
                        display: flex;

                        .moneyleft {
                            font-size: 12px;
                            display: flex;
                            align-items: center;
                        }


                    }

                    .money {
                        color: #ccc;
                        font-size: 10px;
                        text-decoration: line-through;
                        margin-left: 2px;
                        display: flex;
                        align-items: flex-end;
                        margin-left: 3px;

                    }
                }
            }
        }
    }
}
</style>